<template>
  <div>
    <div ref="radar" style="width: 100%; height: 380px" />
  </div>
</template>

<script>
// 导入 echarts
import * as echarts from "echarts";

export default {
  mounted() {
    this.echartInit();
  },
  methods: {
    echartInit() {
      const myChart = echarts.init(this.$refs.radar);
      //   图标自适应
      window.onresize = function () {
        myChart.resize();
      };
      const option = {
        color: ["#4B6EEF", "#3ABF81", "#FF5050", "#FCA92E", "#A6B8FF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          icon: "circle",
          bottom: "5%",
          itemWidth: 12,
          itemHeight: 12,
          // 图例之间的间距
          itemGap: 20,
          textStyle: {
            //图例文字的样式
            color: "#000000",
            fontSize: 14,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            barWidth: "40px",
            name: "网络和应用服务异常",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [8, 0, 4, 10, 6, 6, 4],
          },
          {
            name: "用户行为异常",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [2, 4, 12, 4, 4, 6, 2],
          },
          {
            name: "管理员行为异常",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [6, 6, 4, 10, 6, 2, 4],
          },
          {
            name: "外部边界异常",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [2, 6, 4, 6, 6, 6, 2],
          },
          {
            name: "管理配置违规",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [10, 4, 6, 8, 2, 8, 2],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
